<template>
  <div class="text-preview-container">
    <div class="text-controls">
      <el-button-group>
        <el-button
          :disabled="currentPage === 1"
          @click="prevPage"
          icon="el-icon-arrow-left"
        />
        <el-button>{{ currentPage }} / {{ totalPages }}</el-button>
        <el-button
          :disabled="currentPage === totalPages"
          @click="nextPage"
          icon="el-icon-arrow-right"
        />
      </el-button-group>

      <div class="right-controls">
        <el-select
          v-model="fontSize"
          size="mini"
          style="width: 100px; margin-right: 10px;"
        >
          <el-option
            v-for="size in [12, 14, 16, 18, 20]"
            :key="size"
            :label="`${size}px`"
            :value="size"
          />
        </el-select>

        <el-tooltip :content="wrapText ? '关闭自动换行' : '开启自动换行'" placement="top">
          <el-button
            :type="wrapText ? 'primary' : ''"
            @click="wrapText = !wrapText"
            icon="el-icon-sort"
          />
        </el-tooltip>

        <el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'" placement="top">
          <el-button
            :icon="isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'"
            @click="$emit('toggle-fullscreen')"
          />
        </el-tooltip>
      </div>
    </div>

    <div
      class="text-content"
      :style="{
        fontSize: fontSize + 'px',
        whiteSpace: wrapText ? 'pre-wrap' : 'pre'
      }"
    >
      <template v-if="content">
        {{ displayedContent }}
      </template>
      <div v-else-if="isLoading" class="loading-text">
        <i class="el-icon-loading" />
        加载文本内容中...
      </div>
      <div v-else class="error-text">
        <i class="el-icon-document" />
        无法加载文本内容
      </div>
    </div>
  </div>
</template>

<script>
const LINES_PER_PAGE = 100

export default {
  props: {
    content: {
      type: String,
      default: ''
    },
    isLoading: Boolean,
    isFullscreen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentPage: 1,
      fontSize: 14,
      wrapText: true
    }
  },
  computed: {
    lines() {
      return this.content.split('\n')
    },
    totalPages() {
      return Math.ceil(this.lines.length / LINES_PER_PAGE)
    },
    displayedContent() {
      const start = (this.currentPage - 1) * LINES_PER_PAGE
      const end = start + LINES_PER_PAGE
      return this.lines.slice(start, end).join('\n')
    }
  },
  watch: {
    content() {
      this.currentPage = 1
    }
  },
  methods: {
    prevPage() {
      this.currentPage = Math.max(1, this.currentPage - 1)
    },
    nextPage() {
      this.currentPage = Math.min(this.totalPages, this.currentPage + 1)
    }
  }
}
</script>

<style scoped>
.text-preview-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.text-controls {
  padding: 10px;
  background: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right-controls {
  display: flex;
  align-items: center;
}

.text-content {
  flex: 1;
  overflow: auto;
  padding: 20px;
  line-height: 1.6;
  font-family: 'Menlo', 'Consolas', monospace;
  background: white;
}

.loading-text,
.error-text {
  text-align: center;
  color: #606266;
  padding: 50px 0;
}
</style>
